{include file="common/head"/}
<style>
    #tran{
        position: absolute;
        bottom: 10px;
        width: 100%;
        height: 45px;
        text-align: center;
    }
</style>
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>工单详情</legend>
    </fieldset>
    <div class="demoTable">
        <button type="button" onclick="window.history.back()" class="layui-btn layui-btn-primary">返回</button>
    </div>

    <div class="layui-row">
        <div class="layui-col-md7">
            <div class="layui-card">
                <div class="layui-card-header">工单信息</div>
                <div class="layui-card-body">
                    <table class="layui-table">
                        <tbody id="data">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md5">
            <div class="layui-card">
                <div class="layui-card-header">跟踪信息</div>
                <div class="layui-card-body">
                    <div class="layui-collapse" id="track">
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{include file="common/foot"/}
<script src="/public/static/common/js/jquery.2.1.1.min.js"></script>
<script>

    let info = {$info|raw};
    let key = {number:'编号',title:'标题',tel:'联系电话',address:'地址',desc:'备注',fault_name:'故障类型',c_time:'创建时间',state_name:'状态'};

    let layer = null;
    layui.use(['element','layer'], function(){
        var element = layui.element;
        layer = layui.layer;

        $.each(key,function (k,v) {
            $('#data').append('<tr>\n' +
                '    <td class="text-center">'+v+'</td>\n' +
                '    <td class="text-left">'+info[k]+'</td>\n' +
                '</tr>');
        });

        $.each(info.track,function (k,v) {
            let str = '<div class="layui-colla-item">\n' +
                '    <h2 class="layui-colla-title">'+v.title+'('+v.admin_name+(v.is_comp==1?'-<span style="color: green">已完成</span>':'-<span style="color: red">正在进行</span>')+')-'+v.add_time+'</h2>\n' +
                '    <div class="layui-colla-content '+(k==0?'layui-show':'')+'" style="padding: 3px 10px;">\n';

            str += '<table class="layui-table"><tbody>';
            $.each(v.list,function (kl,vl) {
                str += '<tr><td class="text-center"><img layer-src="'+vl.icon+'" src="'+vl.icon+'" alt="" style="max-width: 22px;"></td><td>'+'【'+vl.admin_name+'】'+vl.content+expl(vl.attach)+'<br><span style="font-size: 14px;color: #999">'+vl.c_time+'</span></td></tr>';
            });
            str += '</tbody></table>';

            str += '    </div>\n' +
                '</div>';
            $('#track').append(str);
        });

       /* layer.photos({
            photos: '#track'
            ,closeBtn:1
            ,anim: 5
        });*/
        element.render();
    });


    function expl(att) {
        let arr = att.split(';');
        let str = '<div>';
        for (al in arr) {
            if(arr[al].length>0){
                str += '<span><img src="'+arr[al]+'" alt="" onclick="imgEn(this)"></span>';
            }
        }
        str += '</div>';
        return str;
    }


    let thIndex = 0;
    function imgEn(_this,width,hight,margin_left){ //传入捕获元素放大后的宽高,str为所需放大图片的路径
        var $str = '<img src="'+$(_this).attr('src')+'" width="100%" height="100%" onclick="layer.close(thIndex);" id="imgtran" style="transform:rotate(0deg);" /><div id="tran" onclick="tran()"><span><i class="layui-icon" style="font-size: 30px;background-color: aliceblue;padding: 4px;border-radius: 4px;cursor: pointer;">&#xe666;</i></span></div>';
        var $width = width||'auto;max-width:98%;';                                  //若传入宽高为空则为默认自适应
        var $hight = hight||'auto;max-height:98%;';
        thIndex = layer.open({
            type: 1,
            shade: 0.3,
            shadeClose:true,
            title: false, //不显示标题
            area: [$width, $hight],
            content: $str, //捕获的元素(例如:"<div><img src='图片路径'></div>")
            cancel: function(index){
                layer.close(index);
            },
            success:function(y,i){
                var t = $('.layui-layer-page').css('top');
                if(parseInt(t) < 0) $('.layui-layer-page').css('top','5px');
            }
        });
        layer.style(thIndex, {
            backgroundColor: '#000'
        });
    }

    let deg = 1;
    function tran() {
        let de = deg * 90 * (-1);
        $('#imgtran').css('transform','rotate('+de+'deg)');
        deg ++;
    }


    function rollImg(o){
        /* 获取当前页面的缩放比
            若未设置zoom缩放比，则为默认100%，即1，原图大小
        */
        var zoom=parseInt(o.style.zoom)||100;
        /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom
            wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
        */
        zoom+=event.wheelDelta/24;
        /* 如果缩放比大于0，则将缩放比加载到页面元素 */
        if (zoom>0) o.style.zoom=zoom+'%';

        pos();
        /* 如果缩放比不大于0，则返回false，不执行操作 */
        return false;
    }

    function pos() {
        let left = ($('body').width()-$('#layui-layer'+thIndex).width())/2;
        let top = ($('body').height()-$('#layui-layer'+thIndex).height())/2;
        if(left<0) left = 1;
        if(top<0) top = 1;
        $('#layui-layer'+thIndex).css({'left':left,'top':top});
    }

</script>